<template>
  <!-- 1.template 使用小程序的组件，不要使用html标签 -->
  <view>
    <!-- 1.0 头部搜索框 search-->
    <Search />

    <!-- 2.0 轮播图 banner -->
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      circular
      interval="3000"
      indicator-color="rgba(0, 0, 0, .3)"
      indicator-active-color="#EA4350"
    >
      <!-- 在 vue 单文件列表渲染需要用到 v-for ，通过脚手架编译后会自动变成 wx：for -->
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <image class="swiper_image" :src="item.image_src" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 3.0 导航栏 nav -->
    <view class="nav">
      <navigator
        v-for="item in navData"
        :key="item.name"
        class="nav_item"
        hover-class="none"
        :open-type="item.open_type"
        :url="item.navigator_url"
      >
        <image class="nav_image" :src="item.image_src" mode="aspectFill" />
      </navigator>
    </view>

    <!-- 4.0 首页楼层图 -->
    <view class="floor" v-for="(item, index) in floorData" :key="index">
      <view class="floor_title">
        <image
          class="floor_title_image"
          :src="item.floor_title.image_src"
          mode="aspectFill"
        />
      </view>
      <view class="floor_list">
        <navigator
          class="floor_list_item"
          v-for="item2 in item.product_list"
          :key="item2.name"
          :open-type="item2.open_type"
          :url="item2.navigator_url"
          redirect
          hover-class="none"
        >
          <!-- 注意，小程序中属性绑定用反引号会报错 -->
          <image
            class="floor_list_image"
            :src="item2.image_src"
            mode="aspectFill"
            :style="'width:' + item2.image_width + 'rpx'"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import { homeSwiper, homeCatitems, homeFloordata } from "@/api";
export default {
  components: {
    Search
  },
  data() {
    return {
      swiperData: [],
      navData: [],
      floorData: []
    };
  },
  //注意生命周期请使用小程序周期
  async onLoad() {
    // 调用的时候支持 async await 写法了
    // 1.0 首页轮播图
    const res = await homeSwiper();
    this.swiperData = res.data.message;

    // 2.0 获取入口导航数据
    const res2 = await homeCatitems();
    this.navData = res2.data.message;

    // 3.0 获取楼层数据
    const res3 = await homeFloordata();
    res3.data.message.forEach(item => {
      item.product_list.forEach(item2 => {
        // replace 替换，在问号前面添加一级 /main
        item2.navigator_url = item2.navigator_url.replace("?", "/main?");
      });
    });
    // 把修改后的数据更新到 floorData 中
    this.floorData = res3.data.message;
  }
};
</script>

<style lang="less" scoped>
.swiper {
  width: 750rpx;
  height: 340rpx;
  .swiper_image {
    width: 750rpx;
    height: 340rpx;
  }
}
// 导航栏模块
.nav {
  display: flex;
  justify-content: space-evenly;
  padding: 12rpx 0 43rpx;
  .nav_item {
    .nav_image {
      width: 128rpx;
      height: 140rpx;
    }
  }
}

// 楼层图
.floor {
  margin-top: 10rpx;
  .floor_title {
    .floor_title_image {
      width: 750rpx;
      height: 60rpx;
    }
  }

  .floor_list {
    // 检测浮动的子元素，清除浮动带来的影响
    overflow: hidden;
    .floor_list_item {
      //浮动实现环绕效果
      float: left;
      margin-left: 13rpx;
      margin-bottom: 10rpx;
      &:nth-child(1) {
        // 第一个导航链接里面的图片变高
        .floor_list_image {
          height: 386rpx;
        }
      }
      .floor_list_image {
        height: 188rpx;
        vertical-align: top;
      }
    }
  }
}
</style>